<nz-card>
  <nz-descriptions
    nzTitle="基本信息"
    nzBordered
    nzSize="small"
    [nzColumn]="{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
  >
    <nz-descriptions-item nzTitle="单号">
      {{ detailsData.deliveryNumber || '-' }}
      <i
        *ngIf="detailsData.deliveryNumber"
        nz-icon
        nzType="copy"
        nzTheme="outline"
        nz-tooltip
        nzTooltipTitle="点击复制"
        (click)="coprText(detailsData.deliveryNumber)"
      ></i>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="状态">
      <span [ngStyle]="{'color': detailsData.state | storeOutStatus: 'color'}">
        {{ detailsData.state | storeOutStatus: 'label' }}
      </span>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="出库类型">
      {{ filterText(outTypeOptions, detailsData.type, 'content') }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="关联单号">
      {{ detailsData.relationNum || '-' }}
      <i
        *ngIf="detailsData.relationNum"
        nz-icon
        nzType="copy"
        nzTheme="outline"
        nz-tooltip
        nzTooltipTitle="点击复制"
        (click)="coprText(detailsData.relationNum)"
      ></i>
    </nz-descriptions-item>

    <nz-descriptions-item nzTitle="预计到货日期" nzSpan="2">{{ detailsData?.arrivalTime || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="出库仓库">
      {{ filterText(warehouseOptions, detailsData.whId, 'id') }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="出库品质" nzSpan="2">
      <span>
        {{ detailsData.quality === 0 ? '不良品' : (detailsData.quality === 1 ? '良品' : '-') }}
      </span>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="备注" nzSpan="4">
      {{ detailsData.remark || '-' }}
    </nz-descriptions-item>
  </nz-descriptions>

  <nz-descriptions
    nzTitle="收货人信息"
    nzBordered
    nzSize="small"
    class="m-t-30"
    [nzColumn]="{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
  >
    <nz-descriptions-item nzTitle="供应商">
      {{ filterText(supplierOptions, detailsData.supId, 'id') }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="收货人">{{ detailsData.consignee || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="联系方式">{{ detailsData.tel || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="地址">{{ detailsData.address || '-' }}</nz-descriptions-item>
  </nz-descriptions>

  <nz-descriptions
    nzTitle="配送信息"
    nzBordered
    nzSize="small"
    class="m-t-30"
    [nzColumn]="{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
  >
    <nz-descriptions-item nzTitle="运费承担">
      {{ detailsData.isFreight === 0 ? '我司承担' : (detailsData.isFreight === 1 ? '用户承担' : '-') }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="配送方式">
      <span>
        {{ detailsData.deliveryMethod | storageDeliveryMethod: 'label' }}
      </span>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="物流公司">
      {{ detailsData.expressName || '-' }}
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="物流单号">
      {{ detailsData.expressNo || '-' }}
    </nz-descriptions-item>
  </nz-descriptions>
</nz-card>

<nz-card class="m-t-4">
  <p class="detail-title">出库明细</p>

  <div class="table-wrap">
    <nz-table
      #mxTable
      nzBordered
      nzSize="small"
      [nzShowPagination]="false"
      [nzFrontPagination]="false"
      [nzData]="exwarehousTableData">
      <thead>
        <tr>
          <th nzAlign="center" rowspan="2" nzWidth="70px">序号</th>
          <th nzAlign="center" colspan="3">商品信息</th>
          <th nzAlign="center" colspan="4">出库信息</th>
          <th nzAlign="center" rowspan="2">操作</th>
        </tr>
        <tr>
          <!-- <th nzAlign="center">商品状态</th> -->
          <th nzAlign="center">商品名称</th>
          <th nzAlign="center">商品编号</th>
          <th nzAlign="center">商品69码</th>

          <th nzAlign="center">行类型</th>
          <th nzAlign="center">行状态</th>
          <th nzAlign="center">预计出库数量</th>
          <th nzAlign="center">实际出库数量</th>
        </tr>
      </thead>
      <tbody>
        <tr
          *ngFor="let data of mxTable.data; let index = index;"
          [ngClass]="{'tr-bg-red': data?.lineState === 1}">
          <!-- 序号 -->
          <td nzAlign="center">{{ index + 1 }}</td>
          <!-- 商品状态 -->
          <!-- <td nzAlign="center">
            <span [ngStyle]="{'color': data.state === 0 ? '#999999' : '#67C23A'}">
              {{ data.state === 0 ? '禁用' : (data.state === 1 ? '启用' : '-') }}
            </span>
          </td> -->
          <!-- 商品名称 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.whGoodsState === 0 ? '#999999' : ''}">
              {{ data?.whGoodsName || '-' }}
            </span>
          </td>
          <!-- 商品编号 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.whGoodsState === 0 ? '#999999' : ''}">
              {{ data?.whGoodsCode || '-' }}
            </span>
          </td>
          <!-- 商品69码 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.whGoodsState === 0 ? '#999999' : ''}">
              {{ data?.whGoodsTwoCode || '-' }}
            </span>
          </td>
          
          <!-- 行类型 -->
          <td nzAlign="center">
            {{ data.type | storageLineState: 'label' }}
          </td>
          <!-- 行状态 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data?.lineState === 0 ? '#67C23A' : '#F56C6C'}">
              {{ data?.lineState === 0 ? '正常' : (data?.lineState === 1 ? '已作废' : '-') }}
            </span>
          </td>
          <!-- * 预计出库数量 -->
          <td nzAlign="center">
            {{ data?.number || '0' }}
          </td>
          <!-- 实际出库数量 -->
          <td nzAlign="center">
            <ng-container *ngIf="data?.lineState === 1; else elseSjrTemplate">
              <!-- 作废 -->
              -
            </ng-container>
            <ng-template #elseSjrTemplate>
              <p style="color: #909399;">
                <ng-container [ngSwitch]="data.type">
                  <span *ngSwitchCase="0">
                    <!-- 指定SN -->
                    {{ data.actualNumber || '-' }}
                  </span>
                  <span *ngSwitchCase="1">
                    <!-- SN管控 -->
                    {{ data.itemSns ? ('已选择' + data.actualNumber + '个SN') : '请选择' }}
                  </span>
                  <span *ngSwitchDefault>
                    {{ libraryTextStr(data) }}
                  </span>
                </ng-container>
              </p>
            </ng-template>
          </td>
          <!-- 操作 -->
          <td nzAlign="center">
            <ng-container *ngIf="data?.lineState === 0 && [1, 2, 3, 4].includes(detailsData.state); else elseTemplate">
              <button
                *ngIf="permission.userPermission.has('storageCenter:out:czOpera') && data.type === 1"
                nz-button
                nzType="link"
                nzSize="small"
                (click)="showSnInfoModal(data)"
              >选择SN</button>

              <button
                *ngIf="permission.userPermission.has('storageCenter:out:czOpera') && data.type === 0"
                nz-button
                nzType="link"
                nzSize="small"
                (click)="showAppointInfoModal(data)"
              >指定SN</button>

              <button
                *ngIf="permission.userPermission.has('storageCenter:out:czOpera') && ![0, 1].includes(data.type)"
                nz-button
                nzType="link"
                nzSize="small"
                (click)="showMoreLocationModal(data)"
              >多库位</button>
            </ng-container>
            <ng-template #elseTemplate>
              -
            </ng-template>
          </td>
        </tr>

        <tr *ngIf="exwarehousTableData?.length" style="background: #fafafa; font-weight: 600;">
          <td nzAlign="center" colSpan="6">合计</td>
          <!-- 预计出库数 -->
          <td nzAlign="center">{{ calcSumTotal('number') }}</td>
          <!-- 实际出库数 -->
          <td nzAlign="center">{{ calcSumTotal('actualNumber') }}</td>
          <td nzAlign="center">-</td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</nz-card>

<nz-card class="m-t-4">
  <div nz-row nzJustify="center">
    <button
      *ngIf="permission.userPermission.has('storageCenter:out:czOpera') && [3, 4].includes(detailsData.state)"
      nz-button
      nzType="primary"
      class="m-r-10"
      [nzLoading]="submitLoading"
      (click)="subTemporaryStorage()"
    >暂存</button>

    <button
      *ngIf="permission.userPermission.has('storageCenter:out:czOpera') && [3].includes(detailsData.state)"
      nz-button
      nzType="primary"
      class="mbtn-green m-r-10"
      (click)="batchPackOver()"
    >打包完成</button>

    <button
      *ngIf="permission.userPermission.has('storageCenter:out:czOpera') && [4].includes(detailsData.state)"
      nz-button
      nzType="primary"
      class="m-r-10"
      (click)="confirmExwarehousNum()"
    >确认出库</button>

    <button
      nz-button
      nzType="default"
      (click)="pageBack()"
    >返回</button>
  </div>
</nz-card>

<!-- 指定SN Modal -->
<sninfo-select-modal
  [(ngModel)]="isSnVisible"
  [goodsInfoData]="snGoodsModalItem"
  [selectedData]="snItemArrs"
  [allocationJudge]="true"
  (snInfoConfirm)="appointSnData($event)"
  (snInfoClear)="clearSnData($event)"
></sninfo-select-modal>

<!-- S 多库位 Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [nzWidth]="1000"
  [(nzVisible)]="isDkwVisible"
  [nzTitle]="'多库位'"
  (nzOnCancel)="isDkwVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <nz-descriptions [nzColumn]="4">
        <nz-descriptions-item nzTitle="商品编号">
          {{ modalInfoItems.whGoodsCode || '-' }}
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="仓库">
          {{ filterText(warehouseOptions, detailsData.whId, 'id') }}
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="品质">
          {{ detailsData.quality === 0 ? '不良品' : (detailsData.quality === 1 ? '良品' : '-') }}
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="预计出库数量">
          {{ modalInfoItems.number }}
        </nz-descriptions-item>
      </nz-descriptions>

      <div class="p-t-10">
        <nz-table
          #dkTable
          nzSize="small"
          nzBordered
          [nzShowPagination]="false"
          [nzFrontPagination]="false"
          [nzData]="moreLocationTable">
          <thead>
            <tr>
              <th nzAlign="center" nzWidth="70px">序号</th>
              <th nzAlign="center">库位</th>
              <th nzAlign="center">库存</th>
              <th nzAlign="center">出库数量</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of dkTable.data; let index = index;">
              <!-- 序号 -->
              <td nzAlign="center">{{ index + 1 }}</td>
              <!-- 库位 -->
              <td nzAlign="center">
                {{ filterText(locationOptions, data.libraryId, 'id') }}
              </td>
              <!-- 库存 -->
              <td nzAlign="center">
                {{ data.stock || '0' }}
              </td>
              <!-- 出库数量 -->
              <td nzAlign="center">
                <nz-input-number
                  style="width: 150px;"
                  [nzMin]="1"
                  [nzMax]="data.stock"
                  [nzStep]="1"
                  [nzPrecision]="0"
                  nzPlaceHolder="请输入出库数量"
                  [(ngModel)]="data.num"
                ></nz-input-number>
              </td>
            </tr>
          </tbody>
        </nz-table>
      </div>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="isDkwVisible = false">取消</button>
        <button nz-button nzType="primary" (click)="subSelectedLocation()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 多库位 Modal -->

<!-- S 指定SN信息 Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [nzWidth]="1000"
  [(nzVisible)]="isZdsnVisible"
  [nzTitle]="'指定SN信息'"
  (nzOnCancel)="isZdsnVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <p class="zdsn-modal-tips p-b-10">
        请<b>务必</b>选择如下SN商品进行发货
      </p>

      <nz-descriptions [nzColumn]="4">
        <nz-descriptions-item nzTitle="商品编号">{{ modalInfoItems.whGoodsCode || '-' }}</nz-descriptions-item>
        <nz-descriptions-item nzTitle="69码">{{ modalInfoItems.whGoodsTwoCode || '-' }}</nz-descriptions-item>
        <nz-descriptions-item nzTitle="商品名称">{{ modalInfoItems.whGoodsName || '-' }}</nz-descriptions-item>
      </nz-descriptions>

      <div class="p-t-10">
        <nz-table
          #zdsnTable
          nzSize="small"
          nzBordered
          [nzShowPagination]="false"
          [nzFrontPagination]="false"
          [nzData]="zdSnInfoTable">
          <thead>
            <tr>
              <th nzAlign="center" nzWidth="70px">序号</th>
              <!-- <th nzAlign="center">SN状态</th> -->
              <th nzAlign="center">库位</th>
              <th nzAlign="center">SN码</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of zdsnTable.data; let index = index;">
              <!-- 序号 -->
              <td nzAlign="center">{{ index + 1 }}</td>
              <!-- SN状态 -->
              <!-- <td nzAlign="center">
                <span [ngStyle]="{'color': data.state | storeSncodeStatus: 'color'}">
                  {{ data.state | storeSncodeStatus: 'label' }}
                </span>
              </td> -->
              <!-- 库位 -->
              <td nzAlign="center">
                {{ filterText(locationOptions, data.libraryId, 'id') }}
              </td>
              <!-- SN码 -->
              <td nzAlign="center">{{ data.code || '-' }}</td>
            </tr>
          </tbody>
        </nz-table>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 指定SN信息 Modal -->

<!-- S 修改配送方式 Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isDeliveryVisible"
  [nzTitle]="'修改配送方式'"
  (nzOnCancel)="isDeliveryVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <form nz-form [formGroup]="validateDeliveryForm">
        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzRequired>运费承担</nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请选择运费承担!">
            <nz-radio-group formControlName="isFreight">
              <label nz-radio [nzValue]="0">我方承担</label>
              <label nz-radio [nzValue]="1">用户承担</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzRequired>配送方式</nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请选择配送方式!">
            <nz-radio-group
              class="radio-psfs-wrap"
              formControlName="deliveryMethod"
              (ngModelChange)="deliveryChange($event)">
              <label
                *ngFor="let option of deliveryOptions"
                nz-radio
                [nzValue]="option.value"
              >{{ option.label }}</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label
            [nzSpan]="5"
            [nzRequired]="[1, 2].includes(validateDeliveryForm.value.deliveryMethod)">
            物流公司
          </nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请选择物流公司!">
            <nz-select
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="请选择物流公司"
              [nzDisabled]="[3].includes(validateDeliveryForm.value.deliveryMethod)"
              formControlName="expressCode">
              <nz-option
                *ngFor="let option of logisticsOptions"
                [nzDisabled]="!['JD', 'SF'].includes(option.content) && validateDeliveryForm.value.deliveryMethod == 1"
                [nzLabel]="option.name"
                [nzValue]="option.content"
              ></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label
            [nzSpan]="5"
            [nzRequired]="[2].includes(validateDeliveryForm.value.deliveryMethod)">
            物流单号
          </nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请输入物流单号!">
            <input
              nz-input
              placeholder="请输入物流单号"
              formControlName="expressNo"
            />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="5">运费</nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请输入运费!">
            <nz-input-number
              style="width: 50%;"
              [nzMin]="0"
              [nzMax]="99999"
              [nzStep]="1"
              [nzDisabled]="[1].includes(validateDeliveryForm.value.deliveryMethod)"
              nzPlaceHolder="请输入运费"
              formControlName="expressPrice"
            ></nz-input-number>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="isDeliveryVisible = false">取消</button>
        <button nz-button nzType="primary" [nzLoading]="modifyDeliveryLoading" (click)="subEditDeliveryData()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 修改配送方式 Modal -->